<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    数字1： <input type="text" id="num1" value="10">
    <br>
    数字2： <input type="text" id="num2" value="12">
    <br>
    <button id="btn">比较大小</button>
    <div id="res"></div>
    <!-- 二选一 -->
    <script type="text/javascript" src=""></script>
    <script>
        // 版本2： 提供触发条件： 点击按钮时触发
        var numBox1 = document.getElementById('num1')
        var numBox2 = document.getElementById('num2')
        var btnBox = document.getElementById('btn')
        // 点击事件： ***.onclick = function () {}  // 给***元素绑定点击事件，值为一个函数
        btnBox.onclick = function () {
            var num1Value = Number(numBox1.value)
            var num2Value = Number(numBox2.value)
            if (num1Value > num2Value) {
                alert('num1>num2')
            } else if  (num1Value < num2Value) {
                alert('num1<num2')
            } else {
                // 最后一个情况
                alert('num1=num2')
            }
        }


        // 最low版本
        // var numBox1 = document.getElementById('num1')
        // var numBox2 = document.getElementById('num2')
        // var num1Value = numBox1.value // '10'
        // var num2Value = numBox2.value // '12'
        // if (num1Value > num2Value) {
        //     alert('num1>num2')
        // } else if  (num1Value < num2Value) {
        //     alert('num1<num2')
        // } else {
        //     // 最后一个情况
        //     alert('num1=num2')
        // }

        

    </script>
</body>
</html>